<template>
  <common-card title="今日交易用户数" :value="numberFormat(orderUser)">
    <v-chart :option="getOption()" autoresize />
    <template #bottom>
      <span>退货率</span>
      <span class="emphasis">{{ returnRate }}%</span>
    </template>
  </common-card>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useDataStore } from "@/stores/echartsData";
import useFormat from "@/hooks/useFormat";
// 实例化仓库
const dataStore = useDataStore();

const orderUser = ref<number>(0);
const returnRate = ref<number>(0);
const orderUserTrend = ref<number[]>([]);
const orderUserTrendAxis = ref<string[]>([]);

const getOption = () => {
  return {
    xAxis: {
      type: "category",
      data: orderUserTrendAxis.value,
    },
    yAxis: {
      show: false,
    },
    series: [
      {
        name: "实时交易量",
        data: orderUserTrend.value,
        type: "bar",
        color: {
          type: "linear",
          x: 0, //右
          y: 0, //下
          x2: 0, //左
          y2: 1, //上
          colorStops: [
            {
              offset: 0,
              color: "#83bff6", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#188df0", // 100% 处的颜色
            },
          ],
        },
      },
    ],
    // 图表在坐标中显示的位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    tooltip: {
      trigger: "axis",
    },
  };
};
// 数据格式化
const { numberFormat } = useFormat();
// 对数据进行监控
watch(dataStore, (newVal) => {
  orderUser.value = newVal.reportData.orderUser as number;
  returnRate.value = newVal.reportData.returnRate as number;
  orderUserTrend.value = newVal.reportData.orderUserTrend as number[];
  orderUserTrendAxis.value = newVal.reportData.orderUserTrendAxis as string[];
});
</script>
<script lang="ts">
export default {
  name: "TodayUsers",
};
</script>
